<template>
    <div class="bgf">        
        <div class="content">
            <div v-if='!getVerifynum'>
                <p class='explain'>请输入手机号码</p>
                <div class="telphone">
                    <input type="text" placeholder="填写真实有效的手机号码" v-model="telphone">
                </div>
                <div class="verify">
                    <input type="text" placeholder="验证码" v-model="verify">
                    <span @click='getVerify' :class="{'canSendCode':canSendCode}">{{verifyBtn}}</span>
                </div>
                <div class="login" @click='letLogin'>确认</div>
            </div>
            <div v-else>
                <p class='explain'>设置密码</p>
                <div class="setPassword">
                    <input type="password" placeholder="请输入新密码" v-model="newpassword">
                </div>
                <div class="verify">
                    <input type="password" placeholder="请确认登录密码" v-model="newpasswordtwo">
                </div>
                <div class='passexplain'>密码由6-16位数字与字母组成</div>
                <div class="login" @click='newPasswordconfig'>确认</div>  
            </div>
        </div>
    </div>

</template>
<script>
import { Toast } from 'mint-ui';
import { sendVerifyCode, forgetPassword, register} from "@/utils/api.js";
export default {
    data() {
        return{
            username: '',
            telphone: '',
            verify: '',
            verifyBtn: '获取验证码',
            canSendCode: true,
            getVerifynum: false,
            resVerigy: '',
            newpassword: '',
            newpasswordtwo: ''
        }
    },
    mounted() {
            const Letter = new Array('a','b','c','d','e','f','g','h','i','g','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
            const random1 = Math.round(Math.random()*26);
            const random2 = Math.round(Math.random()*26);
            this.username = 'dh' + Letter[random1] + Letter[random2] + (Math.floor(Math.random()*8999 +1000));
        // console.log(this.$router.currentRoute.query.telephone)
        if(this.$router.currentRoute.query && this.$router.currentRoute.query.telephone) {
            this.getVerifynum = true
            this.telphone = this.$router.currentRoute.query.telephone
            this.verify = this.$router.currentRoute.query.verify
        }
    },
    methods: {
        getVerify() {
            if (this.canSendCode) {
                this.canSendCode = false
                const data = {
                    telephone: this.telphone
                }
                sendVerifyCode({ data }).then((res) => {
                    if (res.data.code !=='0') {
                        Toast(res.data.message)
                        this.canSendCode = true
                    } else {
                        this.resVerigy = res.data.result
                        Toast(res.data.message)
                        this.verifyBtn = '(60s)'
                        const timer = setInterval(() => {
                            const count = parseInt(this.verifyBtn.substring(1)) - 1
                            this.verifyBtn = '(' + count + 's)'
                            if(count <= 0) {
                                clearInterval(timer)
                                this.verifyBtn = '重新发送'
                                this.canSendCode = true
                            }
                        }, 1000)
                    }
                })
            }
        },
        letLogin() {
            if(!this.telphone) {
                Toast('手机号码不能为空')
                return false
            } else if(!(/^1\d{10}$/.test(this.telphone))) {
                Toast('请输入正确的手机号');
                return false
            } else if(!this.verify){
                Toast('请输入验证码');
                return false
            } else if(this.verify !== this.resVerigy) {
                Toast('验证码不匹配');
                return false
            } else {
                this.getVerifynum = true
            }
        },
        newPasswordconfig() {
            const data = {
                verifyCode: this.verify,
                telephone: this.telphone,
                password: this.newpassword,
                username: this.username,
                type: 2
            }
            if (!this.newpassword) {
                Toast('请输入新密码')
            } else if(!(/^(?=.*[0-9].*)(?=.*[A-Z,a-z].*).{6,16}$/.test(this.newpassword))) {
                Toast('请输入6-16为字母与数字组合的密码')
            } else if(this.newpassword !== this.newpasswordtwo) {
                Toast('请输入相同密码')
            } else {
                // 注册接口
                register({data}).then((res) => {
                    if(res.data.code == '0' || res.data.code == '-13') {
                        Toast(res.data.message)
                        const uid = res.data.result.id
                        if(uid) {
                            sessionStorage.userInfo = JSON.stringify(res.data.result)
                            this.$router.push({path:'/listenBook', query:{uid}})
                        } else {
                            this.$router.push({path:'/mobillogin'})                            
                        }
                    } else {
                        Toast(res.data.message)
                    }
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.bgf{
    background: #fff;
    height: 100%;
}
.verification{
    flex: 1;
    text-align: center;
    font-size: 0.28rem;
    line-height: 1rem;
}
.explain{
    font-size: 0.4rem;
    line-height: 0.4rem;
    height: 0.4rem;
    padding: 0.6rem 0 0.4rem;
}
.telphone{
    height: 0.6rem;
    padding: 0.2rem 0;
    border-bottom: 0.01rem solid #ccc;
    span{
        display: block;
        width: 0.92rem;
        height: 0.6rem;
        line-height: 0.6rem;
        float: left;
        border-right: 0.01rem solid #ccc;
    }
    input{
        outline: none;
        border: 0;
        float: left;
        font-size: 0.28rem;
        height: 0.6rem;
        line-height: 0.6rem;
    }
}
.setPassword{
    height: 0.6rem;
    padding: 0.2rem 0;
    border-bottom: 0.01rem solid #ccc;
    input{
        outline: none;
        border: 0;
        float: left;
        width: 100%;
        font-size: 0.28rem;
        height: 0.6rem;
        line-height: 0.6rem;
    }
}
.verify{
    height: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 0.01rem solid #ccc;
    input{
        outline: none;
        border: 0;
        width: 4rem;
        float: left;
        font-size: 0.28rem;
        height: 0.6rem;
        line-height: 0.6rem;
    }
    span{
        display: block;
        width: 2rem;
        height: 0.5rem;
        line-height: 0.5rem;
        text-align: center;
        float: right;
        background: #ccc;
        color: #fff;
        border-radius: 0.2rem;
    }
    .canSendCode{
        background: #e71f19;
    }
}
.passexplain{
    height: 0.86rem;
    line-height: 0.86rem;
    font-size: 0.26rem;
    color: #6f6f6f;
}
.login{
    width: 100%;
    height: 0.8rem;
    margin: 0.8rem auto 0;
    text-align: center;
    font-size: 0.32rem;
    line-height: 0.8rem;
    background: #e71f19;
    color:#fff;
    border-radius: 0.07rem;
}
</style>



